<template>
	<div>
		<el-card class="box-card" style="width: 100%">
			<div class="search">
				<el-row gutter="20">
					<el-col :span="6">
						<el-select v-model="value" placeholder="请选择路段">
							<el-option
									v-for="item in sectionList"
									:key="item.id"
									:label="item.name"
									:value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<!--选择时间-->
					<el-col :span="8">
						<div class="block">
							<el-date-picker
									v-model="dateRange"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期">
							</el-date-picker>
						</div>
					</el-col>
					<el-col :span="2">
						<el-button type="primary" size="medium">查询</el-button>
					</el-col>
				</el-row>
				<!--卡片展示-->
				
				<el-row type="flex" justify="space-around">
					<el-col :span="3">
						<el-card>
							<span>订单数量(单)</span>
							<h4>12345</h4>
						</el-card>
					</el-col>
					
					<el-col :span="3">
						<el-card>
							<span>营收额(元)</span>
							<h4>12345</h4>
						</el-card>
					</el-col>
					
					<el-col :span="3">
						<el-card>
							<span>退款订单(单)</span>
							<h4>12345</h4>
						</el-card>
					</el-col>
					
					<el-col :span="3">
						<el-card>
							<span>退款金额(元)</span>
							<h4>12345</h4>
						</el-card>
					</el-col>
					
					<el-col :span="3">
						<el-card>
							<span>异常订单(单)</span>
							<h4>12345</h4>
						</el-card>
					</el-col>
					
					<el-col :span="3">
						<el-card>
							<span>异常金额(单)</span>
							<h4>12345</h4>
						</el-card>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-card>
			<el-row>
				<el-col :span="6">
					<h4>数据统计图</h4>
				</el-col>
				<el-col :span="24">
					<el-button-group>
						<el-button type="info">营收</el-button>
						<el-button type="info">退款</el-button>
						<el-button type="info">异常</el-button>
					</el-button-group>
				
				</el-col>
				<el-col :span="24">
					<div id="revenue-line">
					</div>
				</el-col>
			</el-row>
		</el-card>
		
	<!--	订单转化率-->
		<el-card>
			<el-row>
				<el-col :span="24">
					<h4>订单转换率</h4>
				</el-col>
				<el-col :span="12">
					<div id="revenue-pie">
					</div>
				</el-col>
				<el-col :span="4">
					<el-card>
						<h4>订单付费率</h4>
						<h4>89%</h4>
					</el-card>
					<el-card>
						<h4>订单满意度</h4>
						<h4>89%</h4>
					</el-card>
				</el-col>
			</el-row>
		</el-card>
		
	<!--	表格-->
		<el-card>
			<h4>日均订单以及用户增长</h4>
			<el-table
					:data="demo"
					border
					style="width: 100%">
				<el-table-column
						prop="date"
						label="日期"
						width="180">
				</el-table-column>
				<el-table-column
						prop="name"
						label="订单数量"
						width="180">
				</el-table-column>
				<el-table-column
						prop="address"
						label="营收额">
				</el-table-column>
				<el-table-column
						prop="address"
						label="退款订单">
				</el-table-column>
				<el-table-column
						prop="address"
						label="退款金额">
				</el-table-column>
				<el-table-column
						prop="address"
						label="用户增长">
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'revenue-statistics',
		data() {
			return {
				//路段数组
				sectionList: [],
				dateRange: '',
			}
		},
		methods: {},
		mounted() {
			this.$echarts.revenueStatisticsLine('revenue-line',data)
			this.$echarts.renenuePie('revenue-pie')
		}
	}
</script>

<style scoped>
	#revenue-line {
		width: 100%;
		height: 500px;
	}
	#revenue-pie {
		width: 600px;
		height: 400px;
	}
</style>